<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>EaselJS Example: Using Stage.autoClear</title>

	<link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/>
	<script src="../_assets/js/examples.js"></script>

	<script src="../lib/easeljs-NEXT.combined.js"></script>

<script id="editable">
	var canvas;
	var stage;
	var starfield
	var moon;
	var sky;

	function init() {
		// create a new stage and point it at our canvas:
		canvas = document.getElementById("testCanvas");
		stage = new createjs.Stage(canvas);

		// draw the sky:
		sky = new createjs.Shape();
		sky.graphics.beginLinearGradientFill(["#204", "#003", "#000"], [0, 0.15, 0.6], 0, canvas.height, 0, 0);
		sky.graphics.drawRect(0, 0, canvas.width, canvas.height);
		stage.addChild(sky);

		// create a Shape instance to draw the vectors stars in, and add it to the stage:
		starfield = new createjs.Shape();
		stage.addChild(starfield);

		// set up the cache for the star field shape, and make it the same size as the canvas:
		starfield.cache(0, 0, canvas.width, canvas.height);

		// draw the moon in a separate shape, so it isn't part of the generative caching:
		moon = new createjs.Shape();
		moon.graphics.beginFill("#CCF").drawCircle(0, 0, 60);
		moon.graphics.beginFill("#000").drawEllipse(-35, -57, 96, 114);
		moon.rotation = -30;
		stage.addChild(moon);

		// start the tick and point it at the window so we can do some work before updating the stage:
		createjs.Ticker.addEventListener("tick", tick);
		createjs.Ticker.setFPS(30);
	}

	function stop() {
		createjs.Ticker.removeEventListener("tick", tick);
	}

	function tick(event) {
		// draw a vector star at a random location:
		starfield.graphics.beginFill(createjs.Graphics.getRGB(0xFFFFFF, Math.random())).drawPolyStar(Math.random() * canvas.width, Math.random() * canvas.height, Math.random() * 4 + 1, 5, 0.93, Math.random() * 360);

		// draw the new vector onto the existing cache, compositing it with the "source-overlay" composite operation:
		starfield.updateCache("source-overlay");

		// if you omit the compositeOperation param in updateCache, it will clear the existing cache, and draw into it:
		// in this demo, that has the effect of showing just the star that was drawn each tick.
		// shape.updateCache();

		// because the vector star has already been drawn to the cache, we can clear it right away:
		starfield.graphics.clear();

		// darken the sky:
		sky.alpha -= 0.0005;

		// move the moon across the sky:
		var w = canvas.width + 200;
		moon.x = (moon.x + 100 + 1 + w) % w - 100;
		moon.y = 250 - Math.sin(moon.x / w * Math.PI) * 150;

		// draw the updates to stage:
		stage.update(event);
	}

</script>
</head>

<body onload="init();">

<header class="EaselJS">
	<h1>updateCache</h1>

	<p>This example draws a single vector star each tick, then composites it
		onto an existing cache using <code>DisplayObject.updateCache()</code> to
		avoid the cost of rendering the vectors each frame.
		This is similar to setting <code>stage.autoclear</code> to false, but
		can be managed on a per instance basis.
	</p>
</header>

<div>
	<canvas id="testCanvas" width="960" height="400"
			style="background:#000"></canvas>
</div>
</body>
</html>
